<template>
  <!-- 支持卡片/非卡片两种渲染，避免嵌套在页面卡片内出现“卡片中卡片”的视觉问题 -->
  <el-card v-if="asCard" class="search-filters pph-search-filters">
    <el-form :model="searchForm" inline>
      <el-form-item label="生产线" v-if="showLine">
        <LineSelector
          v-model="searchForm.line_name"
          :lines="lines"
          placeholder="筛选生产线"
          :allow-create="true"
          :clearable="true"
          :filterable="true"
        />
      </el-form-item>

      <el-form-item label="创建日期">
        <DateSelector
          v-model="searchForm.created_date"
          placeholder="筛选创建日期"
          :clearable="true"
        />
      </el-form-item>

      <el-form-item v-if="showActions">
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <div v-else class="search-filters pph-search-filters plain">
    <el-form :model="searchForm" inline>
      <el-form-item label="生产线" v-if="showLine">
        <LineSelector
          v-model="searchForm.line_name"
          :lines="lines"
          placeholder="筛选生产线"
          :allow-create="true"
          :clearable="true"
          :filterable="true"
        />
      </el-form-item>

      <el-form-item label="创建日期">
        <DateSelector
          v-model="searchForm.created_date"
          placeholder="筛选创建日期"
          :clearable="true"
        />
      </el-form-item>

      <el-form-item v-if="showActions">
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import { reactive, watch } from 'vue'

import DateSelector from './DateSelector.vue'
import LineSelector from './LineSelector.vue'

interface Line {
  line_name: string
}

interface SearchForm {
  line_name: string
  created_date: string
}

interface Props {
  lines: Line[]
  initialValues?: Partial<SearchForm>
  showActions?: boolean
  showLine?: boolean
  autoEmitOnChange?: boolean
  asCard?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  initialValues: () => ({}),
  showActions: true,
  showLine: true,
  autoEmitOnChange: false,
  asCard: true
})

const searchForm = reactive<SearchForm>({
  line_name: '',
  created_date: '',
  ...props.initialValues
})

const emit = defineEmits<{
  search: [form: SearchForm]
  reset: []
}>()

function handleSearch() {
  emit('search', { ...searchForm })
}

function handleReset() {
  searchForm.line_name = ''
  searchForm.created_date = ''
  emit('reset')
}

// 当启用自动触发时，任意筛选项变化立即向父组件同步
watch(
  () => ({
    line_name: searchForm.line_name,
    created_date: searchForm.created_date
  }),
  (val) => {
    if (props.autoEmitOnChange) {
      emit('search', { ...val })
    }
  },
  { deep: true }
)
</script>

<style scoped>
.search-filters {
  margin-bottom: 20px;
}

.plain {
  /* 非卡片模式：去除卡片视觉，嵌入父容器 */
  padding: 0;
}
</style>
